<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CoronaBot</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../static/css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <!-- partial:index.partial.html -->
  <section class="msger">
    <header class="msger-header">
      <div class="msger-header-title">
        <i class="fas fa-bug"></i> 您的智能运维助手 <i class="fas fa-bug"></i>
      </div>
    </header>

    <main class="msger-chat">
      <div class="msg left-msg">
        <div class="msg-img" style="background-image: url(../static/images/smart_man.svg)"></div>

        <div class="msg-bubble">
          <div class="msg-info">
            <div class="msg-info-name">智能助手</div>
            <div class="msg-info-time">系统启动</div>
          </div>

          <div class="msg-text">
            您好！在此竭诚为您服务。
          </div>
        </div>
      </div>

    </main>

    <form class="msger-inputarea">
      <textarea type="text" class="msger-input" id="textInput" placeholder="说点什么吧..."></textarea>
      <button type="submit" class="msger-send-btn">Send</button>
    </form>
  </section>
  <!-- partial -->
  <script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
  <script>

    const msgerForm = get(".msger-inputarea");
    const msgerInput = get(".msger-input");
    const msgerChat = get(".msger-chat");


    // Icons made by Freepik from www.flaticon.com
    const BOT_IMG = "../static/images/smart_man.svg";
    const PERSON_IMG = "../static/images/your_photo.svg";
    const BOT_NAME = "智能助手";
    const PERSON_NAME = "你";

    msgerForm.addEventListener("submit", event => {
      event.preventDefault();

      const msgText = msgerInput.value;
      if (!msgText) return;

      appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
      msgerInput.value = "";
      botResponse(msgText);
    });

    function appendMessage(name, img, side, text) {
      //   Simple solution for small apps
      const msgHTML = `
<div class="msg ${side}-msg">
  <div class="msg-img" style="background-image: url(${img})"></div>
  <div class="msg-bubble">
    <div class="msg-info">
      <div class="msg-info-name">${name}</div>
      <div class="msg-info-time">${formatDate(new Date())}</div>
    </div>
    <div style="white-space: pre-wrap;">${text}</div>
  </div>
</div>
`;

      msgerChat.insertAdjacentHTML("beforeend", msgHTML);
      msgerChat.scrollTop += 500;
    }

    function botResponse(rawText) {
      // Bot Response
      // 构造 AJAX 请求
      $.ajax({
        url: "/get",  // 后端视图函数的URL路由，与urls.py中配置的路径一致
        method: "GET",
        data: { msg: rawText },  // 将用户输入的消息作为查询参数发送给后端
        success: function (data) {

          //const audio = new Audio(data.bot_speech);
          const audio = new Audio();
          audio.src = data.bot_speech + '?rand=' + Math.random();
          audio.play();
          console.log(data.bot_speech);


          // 在成功接收到后端响应后，将机器人的回复显示在聊天窗口中
          const msgText = data.bot_response;
          appendMessage(BOT_NAME, BOT_IMG, "left", msgText);



        },
        error: function (xhr, status, error) {
          // 处理请求错误
          console.error("AJAX请求失败:", error);
        }
      });

    }


    // Utils
    function get(selector, root = document) {
      return root.querySelector(selector);
    }

    function formatDate(date) {
      const h = "0" + date.getHours();
      const m = "0" + date.getMinutes();

      return `${h.slice(-2)}:${m.slice(-2)}`;
    }



  </script>

</body>

</html>